Google Maps API ব্যবহার করে আপনি মানচিত্রে Custom Overlay তৈরি করতে পারেন, যা আপনার মানচিত্রে বিভিন্ন ধরনের কাস্টম তথ্য বা উপাদান (elements) যোগ করতে সহায়তা করে। Custom Overlay মূলত মানচিত্রের উপরে গ্রাফিক্যাল কন্টেন্ট (যেমন কাস্টম ছবি, পোলিগন, রুট ইত্যাদি) প্রদর্শন করতে ব্যবহৃত হয়। এটি অত্যন্ত কার্যকরী যখন আপনাকে মানচিত্রে নির্দিষ্ট ধরনের তথ্য প্রদর্শন করতে হয়।
Custom Overlay তৈরি এবং কনফিগার করার জন্য পদক্ষেপ
HTML এবং JavaScript কোড তৈরি করা: নিচে একটি উদাহরণ দেওয়া হলো যেখানে কাস্টম Overlay হিসেবে একটি কাস্টম মার্কার (custom marker) এবং একটি কাস্টম পোলিগন (custom polygon) তৈরি করা হয়েছে।
<!DOCTYPE html> <html> <head> <title>Custom Overlay Example</title> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> <style> /* মানচিত্রের সাইজ */ #map { height: 500px; width: 100%; } </style> </head> <body> <h3>Google Map with Custom Overlay</h3> <div id="map"></div> <script> // মানচিত্রটি ইনিশিয়ালাইজ করার জন্য একটি ফাংশন তৈরি করুন function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: {lat: 23.8103, lng: 90.4125}, // ঢাকা, বাংলাদেশ }); // কাস্টম মার্কার তৈরি করা var markerPosition = {lat: 23.8103, lng: 90.4125}; // ঢাকার অবস্থান var customMarker = new google.maps.Marker({ position: markerPosition, map: map, icon: { url: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png', // কাস্টম আইকন scaledSize: new google.maps.Size(50, 50), // আকার কাস্টমাইজ করা }, title: 'Dhaka' }); // কাস্টম পোলিগন তৈরি করা var polygonCoordinates = [ {lat: 23.8103, lng: 90.4125}, // ঢাকা {lat: 23.8203, lng: 90.4225}, // কিছু দূরের স্থান {lat: 23.8103, lng: 90.4325}, {lat: 23.8003, lng: 90.4225} ]; var customPolygon = new google.maps.Polygon({ paths: polygonCoordinates, strokeColor: '#FF0000', // পোলিগনের সীমার রঙ strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', // পোলিগনের পূর্ণ রঙ fillOpacity: 0.35 }); customPolygon.setMap(map); } </script> </body> </html>
কোডের ব্যাখ্যা
- Custom Marker (কাস্টম মার্কার):
google.maps.Markerব্যবহার করে একটি কাস্টম মার্কার তৈরি করা হয়েছে, যেখানেiconপ্রোপার্টি ব্যবহার করে একটি কাস্টম আইকন যোগ করা হয়েছে।- মার্কারের অবস্থান ঢাকার (Dhaka) উপর নির্ধারণ করা হয়েছে এবং
scaledSizeদিয়ে এর আকার কাস্টমাইজ করা হয়েছে।
- Custom Polygon (কাস্টম পোলিগন):
google.maps.Polygonব্যবহার করে একটি পোলিগন তৈরি করা হয়েছে, যার মধ্যেpathsপ্রোপার্টির মাধ্যমে চারটি কোঅর্ডিনেট পয়েন্ট নির্ধারণ করা হয়েছে।- পোলিগনের সীমার রঙ, পূর্ণ রঙ এবং সীমার পুরুত্ব কাস্টমাইজ করা হয়েছে।
- মানচিত্রে Overlay (মানচিত্রের উপর কাস্টম উপাদান):
setMap(map)ফাংশন ব্যবহার করে কাস্টম মার্কার এবং পোলিগনকে মানচিত্রে প্রদর্শন করা হয়েছে।
Custom Overlay এর অন্যান্য উদাহরণ
Google Maps API দিয়ে কাস্টম Overlay বিভিন্ন ধরণের হতে পারে, যেমন:
- Custom Image Overlays: কাস্টম ইমেজ (যেমন ব্যানার বা লোগো) মানচিত্রের উপরOverlay করা।
- Custom Path Overlay: কাস্টম পথ বা রুট যুক্ত করা, যা নির্দিষ্ট স্থান থেকে অন্য স্থানে সংযোগ দেখাবে।
- Custom Data Overlays: যেমন ৩ডি গ্রাফ বা ডাটা ভিজুয়ালাইজেশন মানচিত্রে কাস্টম তথ্য Overlay করা।
সারাংশ
Google Maps API ব্যবহার করে আপনি সহজেই Custom Overlay তৈরি এবং কনফিগার করতে পারেন। কাস্টম Overlay ব্যবহার করে মানচিত্রে গ্রাফিক্যাল কন্টেন্ট যেমন মার্কার, পোলিগন, রুট বা কাস্টম তথ্য যোগ করা যেতে পারে, যা আপনার অ্যাপ্লিকেশন বা ওয়েবসাইটে ইউজার ইন্টারঅ্যাকশন এবং ডেটা ভিজুয়ালাইজেশনে গুরুত্বপূর্ণ ভূমিকা পালন করে।
Read more
